@php
    $allPermissions = $getPermissions();
    $statePath = $getStatePath();

@endphp
<x-dynamic-component
    :component="$getFieldWrapperView()"
    :field="$field"
>
    <div x-data="{
        checkboxListOptions: Array.from($root.querySelectorAll('.fi-fo-permission-checkbox-label')),
        checkboxAllList: Array.from($root.querySelectorAll('.fi-fo-permission-checkbox-all-label')),
        checkIfAllCheckboxesAreChecked(){
            this.checkboxAllList.forEach((checkBoxAll)=>{
               checkBoxAll.querySelector('input[type=checkbox]').checked =  (
                    this.checkboxListOptions.filter((checkboxLabel)=>{
                    return checkboxLabel.querySelector('input[type=checkbox][data-group=\''+checkBoxAll.dataset.group+'\']:checked')
                    }).length === parseInt(checkBoxAll.dataset.count)
               )
            })
        },

        checkAll(event){
            let checked = event.target.checked
            let group = event.target.dataset.group
              this.checkboxListOptions.forEach((checkboxLabel)=>{
                let checkbox = checkboxLabel.querySelector('input[type=checkbox][data-group=\''+group+'\']');
                if(checkbox){
                    checkbox.checked = checked
                    checkbox.dispatchEvent(new Event('change'))
                }
              })
        }

    }"

         x-init="
          $nextTick(() => {
                checkIfAllCheckboxesAreChecked()
            })
         Livewire.hook('commit', ({ component, commit, succeed, fail, respond }) => {

                succeed(({ snapshot, effect }) => {

                    $nextTick(() => {
                        if (component.id !== @js($this->getId())) {
                            return
                        }

                        checkboxListOptions = Array.from(
                            $root.querySelectorAll('.fi-fo-permission-checkbox-label'),
                        )


                        checkIfAllCheckboxesAreChecked()
                    })
                })
            })

         "
         class="flex flex-col gap-6 overflow-y-auto  p-2" style="max-height:36rem">


        @foreach($allPermissions as $group)
            @php
                $gid = $loop->index;
                $count = count($group['permissions']);
            @endphp
            <x-filament::section :compact="true">
                <x-slot name="heading">
                    <div class="flex justify-between items-center">
                        {{$group['name']}}
                        <div>
                            <label class="fi-fo-permission-checkbox-all-label  inline-flex items-center gap-x-3" data-group="{{$gid}}" data-count="{{$count}}">
                                <x-filament::input.checkbox @click="checkAll($event)" data-group="{{$gid}}"/>
                                <span class="text-sm font-medium leading-6 text-gray-950 dark:text-white">全选</span>
                            </label>
                        </div>
                    </div>
                </x-slot>
                <div class="grid xl:grid-cols-4">
                    @foreach($group['permissions'] as $key=>$name)
                        <div wire:key="{{ $this->getId() }}.{{ $statePath }}.{{ $field::class }}.options.{{ $key }}">
                            <label class="fi-fo-permission-checkbox-label inline-flex items-center gap-x-3">
                                <x-filament::input.checkbox data-group="{{$gid}}" data-index="{{$loop->index}}" :attributes="
                                $attributes
                                    ->merge([
                                        'value' => $key,
                                        'wire:loading.attr' => 'disabled',
                                        $applyStateBindingModifiers('wire:model') => $statePath,
                                        'x-on:change' => 'checkIfAllCheckboxesAreChecked()',
                                    ], escape: false)
                                    ->class(['mt-1'])
                            " />
                                <span
                                    class="text-sm font-medium leading-6 text-gray-950 dark:text-white">{{$name}}</span>
                            </label>
                        </div>
                    @endforeach

                </div>
                {{ $getChildComponentContainer() }}
            </x-filament::section>
        @endforeach
    </div>
</x-dynamic-component>

